i<template>
  <div class="order-container">
    <van-nav-bar
      title="订单"
    />
    <van-cell class="order-cell" v-for="item in list" :key="item.id">
      <div class="left">
        <p>{{item.Store[0].name}}</p>
        <span>{{item.commodity[0].name}} x {{item.commodity[0].num}}、{{item.commodity[1].name}} x {{item.commodity[1].num}}  等{{item.commodity.length}}件</span>
      </div>
      <div class="right" v-if="item.type === '0'">
        <p>待支付</p>
        <span class="money">￥59.6</span>
        <van-button color="#15ca00" size="small" to="/order/payment">去支付</van-button>
      </div>
      <div class="right" v-else-if="item.type === '1'">
        <p style="color:#4a83f0">待配送</p>
        <span class="money">￥59.6</span>
        <van-button color="#15ca00" size="small" to="/order/dispatching">查看订单</van-button>
      </div>
      <div class="right" v-else-if="item.type === '2'">
        <p style="color:#4a83f0">待自提</p>
        <span class="money">￥59.6</span>
        <van-button color="#15ca00" size="small" to="/order/pick">查看订单</van-button>
      </div>
      <div class="right" v-else-if="item.type === '3'">
        <p style="color:#6fd185">已收货</p>
        <span class="money">￥59.6</span>
        <van-button color="#15ca00" size="small" to="/order/take">查看订单</van-button>
      </div>
      <div class="right" v-else-if="item.type === '4'">
        <p style="color:red">售后退款</p>
        <span class="money">￥59.6</span>
        <van-button color="#15ca00" size="small" to="/order/vending">查看订单</van-button>
      </div>
      <div class="right" v-else>
        <p style="color:#6fd185">已退款</p>
        <span class="money">￥59.6</span>
        <van-button color="#15ca00" size="small" to="/order/refund" >查看订单</van-button>
      </div>
    </van-cell>
    <!-- <order-payment></order-payment> -->
     <!-- <van-cell class="order-cell">
      <div class="left">
        <p>新佳宜</p>
        <span>牛肉500g x 2、羊肉500g x 2  等5件</span>
      </div>
      <div class="right">
        <p>待配送</p>
        <span class="money">￥59.6</span>
        <van-button color="#15ca00" size="small" to="/order/dispatching">查看订单</van-button>
      </div>
    </van-cell> -->
     <!-- <van-cell class="order-cell">
      <div class="left">
        <p>新佳宜</p>
        <span>牛肉500g x 2、羊肉500g x 2  等5件</span>
      </div>
      <div class="right">
        <p>待自提</p>
        <span class="money">￥59.6</span>
        <van-button color="#15ca00" size="small" to="/order/pick">查看订单</van-button>
      </div>
    </van-cell>
     <van-cell class="order-cell">
      <div class="left">
        <p>新佳宜</p>
        <span>牛肉500g x 2、羊肉500g x 2  等5件</span>
      </div>
      <div class="right">
        <p>已收货</p>
        <span class="money">￥59.6</span>
        <van-button color="#15ca00" size="small" to="/order/take">查看订单</van-button>
      </div>
    </van-cell>
     <van-cell class="order-cell">
      <div class="left">
        <p>新佳宜</p>
        <span>牛肉500g x 2、羊肉500g x 2  等5件</span>
      </div>
      <div class="right">
        <p>售后退款</p>
        <span class="money">￥59.6</span>
        <van-button color="#15ca00" size="small" to="/order/vending">查看订单</van-button>
      </div>
    </van-cell>
     <van-cell class="order-cell">
      <div class="left">
        <p>新佳宜</p>
        <span>牛肉500g x 2、羊肉500g x 2  等5件</span>
      </div>
      <div class="right">
        <p>已退款</p>
        <span class="money">￥59.6</span>
        <van-button color="#15ca00" size="small" to="/order/refund">查看订单</van-button>
      </div>
    </van-cell> -->
  </div>
</template>

<script>
// import axios from 'axios'
import { mapMutations } from 'vuex'
import { getItem } from '@/api/order'
export default {
  name: 'orderIndex',
  components: {
    // OrdetPayment
  },
  props: {},
  data () {
    return {
      list: [],
      type: ''
    }
  },
  computed: {
    // ...mapState('m_order', ['orderData'])
  },
  watch: {},
  created () {
    this.add()
  },
  mounted () {
    this.change(3)
  },
  methods: {
    // ...mapMutations('m_order', ['saveData', 'saveType']),
    ...mapMutations('m_myStores', ['changeActive']),
    change(i) {
      this.changeActive(i)
    },
    async add () {
      try {
        const { data } = await getItem()
        console.log(data)
        this.list = data
      } catch (err) {
        this.$toast('获取列表失败')
      }
      // console.log(this.saveData)
      // axios.get('http://192.168.14.225:8888/dataInfo')
      //   .then(res => {
      //     console.log(res)
      //     this.saveData(res.data)
      //     this.list = res.data
      //     console.log(this.list)
      //     this.saveType(this.type)
      //     // console.log(this.list[0].commodity)
      //     // this.list[0].commodity.forEach(x => {
      //     //   console.log(x.name)
      //     // })
      //     // console.log(commodity)
      //   })
      //   .catch(err => {
      //     console.error(err)
      //   })
    }
  }
}
</script>

<style scoped lang="less">
  .order-container {
    padding: 92px 0;
    .van-nav-bar {
       position: fixed;
      top: 0;
      right: 0;
      left: 0;
      border-bottom: 1px solid #02b6fd;
    }
    .order-cell {
      font-size: 26px;
      border-top: 1px solid #02b6fd;
      border-bottom: 1px solid #02b6fd;
      margin-top: 10px;
      .left {
        display: flex;
        float: left;
        flex-direction: column;
        p {
          margin-left: 20px;
          font-size: 36px;
          color: red;
        }
        span {
          padding-left: 20px;
        }
      }
      .right {
        float: right;
        width: 180px;
        display: flex;
        flex-direction: column;
        text-align: center;
        .van-button {
          height: 55px;
          border-radius: 10px;
        }
        .money {
          font-size: 40px;
          font-weight: 700;
          margin-bottom: 10px;
        }
      }
    }
  }
/deep/.van-nav-bar__content {
  background-color: #02b6fd;
}
</style>
